<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataRyfh } from "@/api/search";
import { addOrUpdateRyfh } from "@/api/addOrUpdate";

const city = window.globalObj.name;
const editorRef = shallowRef();
const editorRef1 = shallowRef();

const toolbarConfig = {};
const toolbarConfig1 = {};

const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");
const mode1 = ref("default");

// 加载html
const initHtml = () => {
	searchDataRyfh({ m: "任务需求-组织" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "有利条件")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "不利因素")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "运输运力方面，本级按每日运送XX批，XX日内可运送疏散人员(客车按70座计算)XX万人，超过城市人口的XX%，能够满足需要。生活物资方面，按每人每天消耗米XXkg/天、面XXkg/天计算，本级主食约XX万kg,能够保障XX万人、XX天，能够满足需要。生活物资市场供应方面，本级主食约XX万kg,能够保障XX万人、XX天，能够满足需要。经费保障方面，本级储备生活保障经费XX亿元，按人均每日XX元标准计算，可为城市居民提供XX天以上的生活费，能够满足需要。"
);

const valueHtml1 = ref(
  "不利因素：人员防护工程方面，可用面积XX㎡，人均防护面积为XX㎡，与国家建设标准人均防护面积0.85㎡相差较大，不能满足需要。掩蔽场所方面，本级辖区内就近可用的掩蔽场所，人均面积XX㎡，平均人员间隔距离不足XX米，不能满足需要。疏散地域方面，疏散地域人口XX人，城区需疏散人口XX人，超过驻地人口XX，不能满足需要。医疗救护方面，本级现有医护人员XX人，不能满足需要。预警报知建设方面，本级覆盖率未达到XX%，存在一定的警报发送盲区。共储备帐篷XX顶，受灾人数为城区总人口数XX%、每XX人共用1顶帐篷计算，共需帐篷XX顶，不能满足需求。核化保障方面，没有核化检测专业队、核化洗消专业队，不能执行任务，不能满足需要。"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateRyfh({
      m: "任务需求-组织",
      data: [
        {
          k: "有利条件",
          v: valueHtml.value,
        },
		{
          k: "不利因素",
          v: valueHtml1.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  if (!editor) return;
  if (!editor1) return;
  editor.destroy();
  editor1.destroy();
});
</script>
<template>
  <div class="">
    <FirstTitle name="有利条件" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="不利因素" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>